<template>
  <div class="root">
    <div v-if="!showEyes" class="main_box" style="">
      <!-- 一盘 -->
      <div class="onece" v-if="roundnum == 1">
        <img v-if="!isTeam" class="nameborad" src="http://qncdn.tissys.com/admin/assets/image/newpg.png" alt="" />
        <img v-if="isTeam" class="nameborad1" src="http://qncdn.tissys.com/admin/assets/image/tuanti.png" alt="">
        <img v-if="liveInfo.status!==3" class="markborad" src="http://qncdn.tissys.com/admin/assets/image/score3.png" alt="" />
        <img v-if="matchType == 'single'&&user_id_a==serve_user" :class="isTeam?'arrow11':'arrow1'" src="http://qncdn.tissys.com/admin/assets/image/score0.png" alt="" />
        <img v-if="matchType == 'single'&&user_id_b==serve_user" :class="isTeam?'arrow22':'arrow2'" src="http://qncdn.tissys.com/admin/assets/image/score0.png" alt="" />
        <img v-if="matchType == 'double'&&user_id_a==serve_user" class="arrow3" src="http://qncdn.tissys.com/admin/assets/image/score0.png" alt="" />
        <img v-if="matchType == 'double'&&user_id_b==serve_user" class="arrow4" src="http://qncdn.tissys.com/admin/assets/image/score0.png" alt="" />
        <img v-if="matchType == 'double'&&user_id_c==serve_user" class="arrow5" src="http://qncdn.tissys.com/admin/assets/image/score0.png" alt="" />
        <img v-if="matchType == 'double'&&user_id_d==serve_user" class="arrow6" src="http://qncdn.tissys.com/admin/assets/image/score0.png" alt="" />
        <!-- 团体单打、普通单打 -->
        <div v-if="matchType == 'single'" :class="isTeam?'name_one':'name_three'">
					<span v-if="isTeam" class="team_name" >{{liveInfo.clash_info.team_name_a}}</span>{{ name_a==''?'':name_a }}</div>
        <div v-if="matchType == 'single'" :class="isTeam?'name_two':'name_four'">
					{{ name_b==''?'':name_b }}<span v-if="isTeam" class="team_name" >{{liveInfo.clash_info.team_name_b}}</span></div>
        <!-- 双打 -->
        <div v-if="matchType == 'double'" :class="isTeam?'db-name1':'db-name3' ">
        	<span class="team_name" v-if="isTeam">{{liveInfo.clash_info.team_name_a}}</span>
          {{ name_a==''?'':name_a }}
          <span>{{ name_b==''?'':name_b }}</span>
        </div>
        <div v-if="matchType == 'double'" :class="isTeam?'db-name2':'db-name4' ">
          {{ name_c==''?'':name_c }}
          <span>{{ name_d }}</span>
        	<span class="team_name" v-if="isTeam">{{liveInfo.clash_info.team_name_b}}</span>
        </div>
        <!-- 分数 从上至下从左至右-->
        <!-- 只打一盘 -->
        <div :class="isTeam? 'num1':'num11'">{{ roundList[0].top == ' ' ? '0' : roundList[0].top }}<span class="dotnum" v-if="roundList[0].top==6">{{roundList[0].tiebreak}}</span></div>
        <div :class="isTeam? 'num2':'num22'">{{ roundList[0].bot == ' ' ? '0' : roundList[0].bot }}<span class="dotnum" v-if="roundList[0].bot==6">{{roundList[0].tiebreak}}</span></div>
        <div v-if="liveInfo.status!==3" :class="isTeam? 'num3':'num33'">{{ roundList[1].top == ' ' ? '0' : roundList[1].top }}<span class="dotnum" v-if="roundList[1].top==6">{{roundList[0].tiebreak}}</span></div>
        <div v-if="liveInfo.status!==3" :class="isTeam? 'num4':'num44'">{{ roundList[1].bot == ' ' ? '0' : roundList[1].bot }}<span class="dotnum" v-if="roundList[1].bot==6">{{roundList[0].tiebreak}}</span></div>
        <!-- 角标 -->
        <div class="clear"></div>
        <div :class="isTeam? 'time':'team_time'" v-if="showtime"><img src="http://qncdn.tissys.com/admin/assets/image/clock.png" alt=""><span>{{liveInfo.game_time}}</span></div>
      </div>
      <!-- 两盘 -->
      <div class="twice" v-if="roundnum ==2">
				<!-- 普通单双打 -->
        <img v-if="!isTeam" class="nameborad" src="http://qncdn.tissys.com/admin/assets/image/newpg.png" alt="" />
				<!-- 团体双打 -->
        <img v-if="isTeam" class="nameborad1" src="http://qncdn.tissys.com/admin/assets/image/tuanti.png" alt="">
        <img v-if="roundnum >= 2" class="score1" src="http://qncdn.tissys.com/admin/assets/image/score2.png" alt="" />
        <img v-if="liveInfo.status!==3" class="markborad" src="http://qncdn.tissys.com/admin/assets/image/score3.png" alt="" />
        <img v-if="matchType == 'single'&&user_id_a==serve_user" :class="isTeam?'arrow11':'arrow1'" src="http://qncdn.tissys.com/admin/assets/image/score0.png" alt="" />
        <img v-if="matchType == 'single'&&user_id_b==serve_user" :class="isTeam?'arrow22':'arrow2'" src="http://qncdn.tissys.com/admin/assets/image/score0.png" alt="" />
        <img v-if="matchType == 'double'&&user_id_a==serve_user" class="arrow3" src="http://qncdn.tissys.com/admin/assets/image/score0.png" alt="" />
        <img v-if="matchType == 'double'&&user_id_b==serve_user" class="arrow4" src="http://qncdn.tissys.com/admin/assets/image/score0.png" alt="" />
        <img v-if="matchType == 'double'&&user_id_c==serve_user" class="arrow5" src="http://qncdn.tissys.com/admin/assets/image/score0.png" alt="" />
        <img v-if="matchType == 'double'&&user_id_d==serve_user" class="arrow6" src="http://qncdn.tissys.com/admin/assets/image/score0.png" alt="" />
        <!-- 团体单打、普通单打 -->
        <div v-if="matchType == 'single'" :class="isTeam?'name_one':'name_three'">
        	<span v-if="isTeam" class="team_name" >{{liveInfo.clash_info.team_name_a}}</span>{{ name_a==''?'':name_a }}</div>
        <div v-if="matchType == 'single'" :class="isTeam?'name_two':'name_four'">
        	{{ name_b==''?'':name_b }}<span v-if="isTeam" class="team_name" >{{liveInfo.clash_info.team_name_b}}</span></div>
        <!-- 双打 -->
        <div v-if="matchType == 'double'" :class="isTeam?'db-name1':'db-name3' ">
					<span class="team_name" v-if="isTeam">{{liveInfo.clash_info.team_name_a}}</span>
          {{ name_a==''?'':name_a }}
          <span>{{ name_b==''?'':name_b }}</span>
        </div>
        <div v-if="matchType == 'double'" :class="isTeam?'db-name2':'db-name4' ">
          {{ name_c==''?'':name_c }}
          <span>{{ name_d==''?'':name_d }}</span>
					<span class="team_name" v-if="isTeam">{{liveInfo.clash_info.team_name_b}}</span>
        </div>
        <!-- 分数 从上至下从左至右-->
        <!-- 两盘 -->
        <div :class="isTeam? 'num1':'num11'">{{ roundList[0].top == ' ' ? '0' : roundList[0].top }}<span class="dotnum" v-if="roundList[0].top==6">{{roundList[0].tiebreak}}</span></div>
        <div :class="isTeam? 'num2':'num22'">{{ roundList[0].bot == ' ' ? '0' : roundList[0].bot }}<span class="dotnum" v-if="roundList[0].bot==6">{{roundList[0].tiebreak}}</span></div>
        <div :class="isTeam? 'num3':'num33'">{{ roundList[1].top == ' ' ? '0' : roundList[1].top }}<span class="dotnum" v-if="roundList[0].top==6">{{roundList[1].tiebreak}}</span></div>
        <div :class="isTeam? 'num4':'num44'">{{ roundList[1].bot == ' ' ? '0' : roundList[1].bot }}<span class="dotnum" v-if="roundList[0].bot==6">{{roundList[1].tiebreak}}</span></div>
        <div v-if="liveInfo.status!==3" :class="isTeam? 'num5':'num55'">{{ roundList[2].top == ' ' ? '0' : roundList[2].top }}<span class="dotnum" v-if="roundList[0].top==6">{{roundList[2].tiebreak}}</span></div>
        <div v-if="liveInfo.status!==3" :class="isTeam? 'num6':'num66'">{{ roundList[2].bot == ' ' ? '0' : roundList[2].bot }}<span class="dotnum" v-if="roundList[0].bot==6">{{roundList[2].tiebreak}}</span></div>
        <div class="clear"></div>
        <div :class="isTeam?'time':'team_time'" v-if="showtime"><img src="http://qncdn.tissys.com/admin/assets/image/clock.png" alt=""><span>{{liveInfo.game_time}}</span></div>
      </div>
      <!-- 三盘 -->
      <div class="thirth" v-if="roundnum == 3 ">
        <img v-if="!isTeam" class="nameborad" src="http://qncdn.tissys.com/admin/assets/image/newpg.png" alt="" />
        <img v-if="isTeam" class="nameborad1" src="http://qncdn.tissys.com/admin/assets/image/tuanti.png" alt="">
        <img v-if="roundList.length >= 2" class="score1" src="http://qncdn.tissys.com/admin/assets/image/score2.png" alt="" />
        <img v-if="roundList.length >= 3" class="score2" src="http://qncdn.tissys.com/admin/assets/image/score2.png" alt="" />
        <img v-if="liveInfo.status!==3" class="markborad" src="http://qncdn.tissys.com/admin/assets/image/score3.png" alt="" />
        <img v-if="matchType == 'single'&&user_id_a==serve_user" :class="isTeam?'arrow11':'arrow1'" src="http://qncdn.tissys.com/admin/assets/image/score0.png" alt="" />
        <img v-if="matchType == 'single'&&user_id_b==serve_user" :class="isTeam?'arrow22':'arrow2'" src="http://qncdn.tissys.com/admin/assets/image/score0.png" alt="" />
        <img v-if="matchType == 'double'&&user_id_a==serve_user" class="arrow3" src="http://qncdn.tissys.com/admin/assets/image/score0.png" alt="" />
        <img v-if="matchType == 'double'&&user_id_b==serve_user" class="arrow4" src="http://qncdn.tissys.com/admin/assets/image/score0.png" alt="" />
        <img v-if="matchType == 'double'&&user_id_c==serve_user" class="arrow5" src="http://qncdn.tissys.com/admin/assets/image/score0.png" alt="" />
        <img v-if="matchType == 'double'&&user_id_d==serve_user" class="arrow6" src="http://qncdn.tissys.com/admin/assets/image/score0.png" alt="" />
        <!-- 团体单打、普通单打 -->
        <div v-if="matchType == 'single'" :class="isTeam?'name_one':'name_three'">
        	<span v-if="isTeam" class="team_name" >{{liveInfo.clash_info.team_name_a}}</span>{{ name_a }}</div>
        <div v-if="matchType == 'single'" :class="isTeam?'name_two':'name_four'">
        	{{ name_b }}<span v-if="isTeam" class="team_name" >{{liveInfo.clash_info.team_name_b}}</span></div>
        <!-- 双打 -->
       <div v-if="matchType == 'double'" :class="isTeam?'db-name1':'db-name3' ">
       	<span class="team_name" v-if="isTeam">{{liveInfo.clash_info.team_name_a}}</span>
         {{ name_a }}
         <span>{{ name_b }}</span>
       </div>
       <div v-if="matchType == 'double'" :class="isTeam?'db-name2':'db-name4' ">
         {{ name_c }}
         <span>{{ name_d }}</span>
       	<span class="team_name" v-if="isTeam">{{liveInfo.clash_info.team_name_b}}</span>
       </div>
        <!-- 分数 从上至下从左至右-->
        <!-- 三盘 -->
        <div :class="isTeam? 'num1':'num11'">{{ roundList[0].top == ' ' ? '0' : roundList[0].top }}<span class="dotnum" v-if="roundList[0].top==6">{{roundList[0].tiebreak}}</span></div>
        <div :class="isTeam? 'num2':'num22'">{{ roundList[0].bot == ' ' ? '0' : roundList[0].bot }}<span class="dotnum" v-if="roundList[0].bot==6">{{roundList[0].tiebreak}}</span></div>
        <div :class="isTeam? 'num3':'num33'">{{ roundList[1].top == ' ' ? '0' : roundList[1].top }}<span class="dotnum" v-if="roundList[1].top==6">{{roundList[1].tiebreak}}</span></div>
        <div :class="isTeam? 'num4':'num44'">{{ roundList[1].bot == ' ' ? '0' : roundList[1].bot }}<span class="dotnum" v-if="roundList[1].bot==6">{{roundList[1].tiebreak}}</span></div>
        <div :class="isTeam? 'num5':'num55'">{{ roundList[2].top == ' ' ? '0' : roundList[2].top }}<span class="dotnum" v-if="roundList[2].top==6">{{roundList[2].tiebreak}}</span></div>
        <div :class="isTeam? 'num6':'num66'">{{ roundList[2].bot == ' ' ? '0' : roundList[2].bot }}<span class="dotnum" v-if="roundList[2].bot==6">{{roundList[2].tiebreak}}</span></div>
        <div v-if="liveInfo.status!==3" :class="isTeam? 'num7':'num77'">{{ roundList[3].top == ' ' ? '0' : roundList[3].top }}<span class="dotnum" v-if="roundList[3].top==6">{{roundList[3].tiebreak}}</span></div>
        <div v-if="liveInfo.status!==3" :class="isTeam? 'num8':'num88'">{{ roundList[3].bot == ' ' ? '0' : roundList[3].bot }}<span class="dotnum" v-if="roundList[3].bot==6">{{roundList[3].tiebreak}}</span></div>
        <div class="clear"></div>
        <div :class="isTeam?'time':'team_time'" v-if="showtime"><img src="http://qncdn.tissys.com/admin/assets/image/clock.png" alt=""><span>{{liveInfo.game_time}}</span></div>
      </div>
    </div>
		<iframe v-if="showIframe" :src="liveInfo.eyes.url" frameborder="0" style="width: 100vw;height: 100vh;position: absolute;top: 0;left: 0;z-index: 999;"></iframe>
	</div>
</template>

<script>
export default {
  data() {
    return {
      liveInfo: {},
      show: null,
      matchType: '', //单打/双打
      matchName: '',
      logoSrc: '',
      systemName: 'TISSYS网球智能服务系统',
      matchStatus: '',
      gameTime: '',
      plateList: [],
      roundList: [],
      groupName: '',
      groundName: '',
      siteNumber: 1,
      stage: '',
      wheel: '',
      wheelList: [],
      name_a: '',
      name_b: '',
      name_c: '',
      name_d: '',
      one_limit_a: '',
      one_limit_b: '',
      user_id_a: '',
      user_id_b: '',
      user_id_c: '',
      user_id_d: '',
      serve_user: '',
      statusColor: '',
      roundnum: 0,
      showtime:false,
      isTeam:false,
			url:'',
			showEyes:false,
			showIframe:false
    };
  },
  created() {
    this.led_info();
  },
  methods: {
    led_info() {
      this.$axios
        .post('LedShow/every_ground_led',{
            com_id: this.$route.query.com_id,
            ground_name: this.$route.query.ground_name,
            mark: this.$route.query.mark,
            time: this.$route.query.time
          },
          {
            headers: {
              token: window.sessionStorage.getItem('token')
            }
          }
        )
        .then(res => {
          setTimeout(() => {
            if (res.data.code == 2000) {
              this.plateList = [];
              this.show = true;
              this.liveInfo = res.data.data;
							console.log(this.liveInfo.eyes?'有鹰眼':'无鹰眼')
							if(this.liveInfo.eyes){
								this.url = this.liveInfo.eyes.url
								this.showIframe=true
								setTimeout(()=>{
									this.showEyes = true
								},2000)
								setTimeout(()=>{
									this.url = ''
									this.showIframe=false
									this.showEyes = false
								},12000)
							}
              // 判断团体和非团体
              if(this.liveInfo.clash_info.team_name_a!==null||this.liveInfo.clash_info.team_name_b!==null){
                this.isTeam = true
              }
              if (this.liveInfo.clash_info.user_id_a.indexOf(',') == -1) {
                //判断单双打
                this.matchType = 'single';
              } else {
                this.matchType = 'double';
              }
              // 初始化运动员姓名和id
              if (this.matchType == 'single') {
                this.name_a = this.liveInfo.clash_info.name_a;
                this.name_b = this.liveInfo.clash_info.name_b;
                this.user_id_a = this.liveInfo.clash_info.user_id_a;
                this.user_id_b = this.liveInfo.clash_info.user_id_b;
              } else {
                this.name_a = this.liveInfo.clash_info.name_a.split('/')[0];
                this.name_b = this.liveInfo.clash_info.name_a.split('/')[1];
                this.name_c = this.liveInfo.clash_info.name_b.split('/')[0];
                this.name_d = this.liveInfo.clash_info.name_b.split('/')[1];
                this.user_id_a = this.liveInfo.clash_info.user_id_a.split(',')[0];
                this.user_id_b = this.liveInfo.clash_info.user_id_a.split(',')[1];
                this.user_id_c = this.liveInfo.clash_info.user_id_b.split(',')[0];
                this.user_id_d = this.liveInfo.clash_info.user_id_b.split(',')[1];
              }
              // 比赛logo
              this.logoSrc = this.liveInfo.com_logo;
              // 比赛名称
              this.matchName = this.liveInfo.com_name;
              // 判断比赛的状态及其颜色
              if (this.liveInfo.status == 0) {
                this.matchStatus = '即将开始';
                this.statusColor = '#409eff';
              } else if (this.liveInfo.status == 1) {
                this.matchStatus = '热身';
                this.statusColor = '#FF8200';
              } else if (this.liveInfo.status == 2) {
                this.matchStatus = '进行中';
                this.statusColor = '#67c23a';
              } else if (this.liveInfo.status == 3) {
                this.matchStatus = '已结束';
                this.statusColor = '#ff0000';
              } else if (this.liveInfo.status == 4) {
                this.matchStatus = '比赛暂停';
                this.statusColor = '#FF8200';
              }
              // 比赛用时
              this.gameTime = this.liveInfo.game_time;
              // console.log(this.gameTime)
              let seconds = this.liveInfo.game_time.substring(4,5)
              // console.log(seconds)
              if (seconds == 0|| seconds == 5 || this.liveInfo.status == 3){
                this.showtime = true
              }else{
                this.showtime = false
              }
              // 比赛场地
              this.groupName = this.liveInfo.group_name;
              this.groundName = this.liveInfo.ground_name;
              this.siteNumber = this.liveInfo.site.split(',')[0];
              // 盘数
              var arr = this.liveInfo.round_num;
              this.roundnum = arr.length;
							
              // console.log('现在是'+(this.roundnum-1)+'盘')
              for (var i = 0; i < arr.length; i++) {
                this.plateList.push(i + 1);
              }
              this.plateList.push('Pts');
              // 比分
              this.roundList = this.liveInfo.round_num;
              this.roundList.push({
                top: this.liveInfo.score_num.split(':')[0],
                bot: this.liveInfo.score_num.split(':')[1],
                tiebreak: ''
              });
              // console.log(this.roundList)
              // 运动员单位
              this.one_limit_a = this.liveInfo.clash_info.one_limit_a;
              this.one_limit_b = this.liveInfo.clash_info.one_limit_b;
              // 发球人
              this.serve_user = this.liveInfo.serve_user;
              // 阶段和轮次
              if (this.liveInfo.com_system === 1 || this.liveInfo.com_system === 4) {
                //1和4才有阶段
                this.stage = this.liveInfo.stage;
                if (this.stage == 1) {
                  this.stage = '第一阶段';
                } else if (this.stage == 2) {
                  this.stage = '第二阶段';
                }
              }
              if (this.liveInfo.com_system === 5) {
                this.stage = this.liveInfo.stage;
                this.stage = '第' + this.stage + '区';
              }
              this.wheel = '第' + this.liveInfo.wheel + '轮';
              // console.log(this.liveInfo);
              let isno = this.liveInfo.isno;
              let field = this.liveInfo.field;

              const distance = this.liveInfo.wheel_number - this.liveInfo.wheel;
              if ((this.liveInfo.com_system == 1 && this.liveInfo.stage == 2) || this.liveInfo.com_system == 3 || this.liveInfo.com_system == 5) {
                // console.log(isno,field);
                if (isno == 0) {
                  if (distance === 0) {
                    this.wheel = '决赛';
                  } else if (distance === 1) {
                    this.wheel = '半决赛';
                  } else if (distance === 2) {
                    this.wheel = '1/4决赛';
                  }
                } else {
                  if (distance === 0) {
                    switch (field) {
                      case 1:
                        this.wheel = '决赛';
                        break;
                      case 2:
                        this.wheel = '5-6附加赛';
                        break;
                      case 3:
                        this.wheel = '3-4附加赛';
                        break;
                      case 4:
                        this.wheel = '7-8附加赛';
                        break;
                    }
                  } else if (distance === 1) {
                    switch (field) {
                      case 1:
                        this.wheel = '半决赛';
                        break;
                      case 2:
                        this.wheel = '半决赛';
                        break;
                      case 3:
                        this.wheel = '5-8附加赛';
                        break;
                      case 4:
                        this.wheel = '5-8附加赛';
                        break;
                    }
                  } else if (distance === 2) {
                    this.wheel = '1/4决赛';
                  }
                }
              }
            } else {
              this.show = false;
            }
            this.led_info();
          }, 1000);
        })
        .catch(res => {
          console.log(res);
          this.led_info();
        });
    }
  }
};
</script>

<style lang="less" scoped>
iframe{
	
}
.root{
  min-height: 100vh;
  background: transparent;
	position: relative;
  .main_box{
		position: absolute;
		z-index: 9;
		bottom: -50px;
		left: -250px;
		transform: scale(.5);
  .onece{
      width: 1100px;
      position: relative;
      .clear{
        clear: both;
      }
      .team_time{
        font-size: 36px;
        font-weight: 700;
        position: absolute;
        top: 20px;
        left: 350px;
        color: #1C809F;
        img{
          margin-right: 10px;
        }
        span,img{
          vertical-align: middle;
        }
      }
      .time{
        font-size: 36px;
        font-weight: 700;
        position: absolute;
        top: 20px;
        left: 510px;
        color: #1C809F;
        img{
          margin-right: 10px;
        }
        span,img{
          vertical-align: middle;
        }
      }
      // 名字面板
      .nameborad{
        width: 450px;
        height: 300px;
        float: left;
      }
			.nameborad1{
			  width: 650px;
			  height: 400px;
				margin-top: -50px;
			  float: left;
			}
      // 绿色面板
      .markborad{
        margin-top: 60px;
        height: 180px;
        float: left;
      }
      .name_one,.name_three{
        width: 400px;
        height: 160px;
        font-size: 45px;
        font-weight: 700;
        color:rgba(248,253,83);
        text-align: center;
        position: absolute;
        top: 0;
        margin-top: -15px;
				left: 80px;
				.team_name{
					display: block;
					margin-left: 50px;
					margin-bottom: 20px;
					color: #fda800!important;
				}
      }
      .name_three{
          width: 250px;
          left: 50px;
      		top: 77px;
      		font-size: 50px;
        }
      .name_four{
        top: 160px!important;
        width:250px!important;
        left: 30px!important;
      	text-align: center!important;
      	font-size: 50px!important;
      }
      .name_two,.name_four{
        width: 400px;
        height: 160px;
        font-size: 45px;
        font-weight: 700;
				padding-top: 15px;
				padding-bottom: 50px;
				box-sizing: border-box;
        color:rgba(248,253,83);
        text-align: center;
        position: absolute;
        bottom: 30px;
        left: 30px;
				.team_name{
					display: inline-block;
					left: 80px;
					position: absolute;
					bottom: 0;
					color: #fda800!important;
				}
      }
			.db-name1,.db-name3{
			  width: 400px;
			  height: 160px;
			  font-size: 36px;
			  font-weight: 700;
			  color: rgba(248,253,83);
			  text-align: center;
			  position: absolute;
			  top: 0;
			  margin-top: -15px;
			  left: 70px;
			  .team_name{
			    display: block;
					margin-left: 50px;
					margin-bottom: 20px;
					color: #fda800!important;
			  }
			  span{
			    display:block;
			    margin-left: -30px;
			  }
			}
			.db-name3{
				width: 250px;
				height: 100px;
				top: 50px;
			}
			.db-name4{
				width: 250px!important;
				height: 100px!important;
				bottom: 0px!important;
			}
			.db-name2,.db-name4{
			  width: 400px;
			  height:160px;
			  font-size: 36px;
			  font-weight: 700;
			  color: rgba(248,253,83);
			  text-align: center;
			  position: absolute;
			  top: 140px;
			  left: 35px;
			  margin-top: 15px;
			  .team_name{
			    display: block;
			    margin-left: -50px;
			    margin-top: 10px;
					color: #fda800!important;
			  }
			  span{
			    display:block;
			    margin-left: -30px;
			  }
			}
      .num1,.num11,.num2,.num22,.num3,.num33,.num4,.num44{
        font-size: 80px;
        position: absolute;
        color: rgba(248,253,83);
        font-weight: 700;
        width: 100px;
        height: 80px;
        text-align: center;
				.dotnum{
				  font-weight: 700;
				  color: #DFE709;
				  font-size: 44px;
				  position: absolute;
				  top: 0px;
				  left: 70px;
				}
      }
      .num1{
        top: 60px;
        left: 510px;
      }
      .num11{
        top: 60px;
        left: 320px;
      }
      .num2{
        top: 150px;
        left: 510px;
      }
      .num22{
        top: 150px;
        left: 320px;
      }
      .num3{
        top: 60px;
        left: 675px;
      }
      .num33{
        top: 60px;
        left: 475px;
      }
      .num4{
        top: 150px;
        left: 675px;
      }
      .num44{
        top: 150px;
        left: 475px;
      }
      .arrow1,.arrow2,.arrow3,.arrow4,.arrow5,.arrow6,.arrow11,.arrow22{
        position: absolute;
        width: 40px;
        height: 50px;
      }
      // 普通单打上
      .arrow1{
        top:70px;
        left: 45px;
      }
      // 普通单打下
      .arrow2{
        top: 180px;
        left: 25px;
      }
			.arrow11{
				top:70px;
				left: 80px;
			}
			.arrow22{
				top: 180px;
				left: 50px;
			}
      // 双打
      .arrow3{
        top: 50px;
        left: 95px;
      }
      .arrow4{
        top: 90px;
        left: 80px;
      }
      .arrow5{
        top: 150px;
        left: 60px;
      }
      .arrow6{
        top: 205px;
        left: 40px;
      }
    }
  .twice{
    width: 1100px;
    position: relative;
    .team_time{
      font-size: 36px;
      font-weight: 700;
      position: absolute;
      top: 20px;
      left: 350px;
      color: #1C809F;
      img{
        margin-right: 10px;
      }
      span,img{
        vertical-align: middle;
      }
    }
    .time{
      font-size: 36px;
      font-weight: 700;
      position: absolute;
      top: 20px;
      left: 510px;
      color: #1C809F;
      img{
        margin-right: 10px;
      }
      span,img{
        vertical-align: middle;
      }
    }
    // 名字面板
    .nameborad{
      width: 450px;
      height: 300px;
      float: left;
    }
    // 团体双打
		.nameborad1{
      width: 650px;
      height: 400px;
			margin-top: -50px;
      float: left;
    }
    // 绿色面板
    .markborad{
      margin-top: 60px;
      height: 180px;
      float: left;
    }
    .name_one,.name_three{
      width: 400px;
        height: 160px;
        font-size: 45px;
        font-weight: 700;
        color:rgba(248,253,83);
        text-align: center;
        position: absolute;
        top: 0;
        margin-top: -15px;
        left: 80px;
      	.team_name{
      		display: block;
      		margin-left: 50px;
      		margin-bottom: 20px;
					color: #fda800!important;
      	}
      }
      .name_three{
        width: 250px;
        left: 50px;
				top: 77px;
				font-size: 50px;
      }
    .name_four{
      top: 160px!important;
      width:250px!important;
      left: 30px!important;
			text-align: center!important;
			font-size: 50px!important;
    }
    .name_two,.name_four{
     width: 400px;
     height: 160px;
     font-size: 45px;
     font-weight: 700;
     padding-top: 15px;
     padding-bottom: 50px;
     box-sizing: border-box;
     color:rgba(248,253,83);
     text-align: center;
     position: absolute;
     bottom: 30px;
     left: 30px;
     .team_name{
     	display: block;
     	margin-left: -80px;
     	margin-top: 18px;
			color: #fda800!important;
     }
    }
    .db-name1,.db-name3{
      width: 400px;
      height: 160px;
      font-size: 36px;
      font-weight: 700;
      color: rgba(248,253,83);
      text-align: center;
      position: absolute;
      top: 0;
      margin-top: -15px;
      left: 70px;
      .team_name{
        display: block;
    		margin-left: 50px;
    		margin-bottom: 20px;
				color: #fda800!important;
      }
      span{
        display:block;
        margin-left: -30px;
      }
    }
    .db-name3{
    	width: 250px;
    	height: 100px;
    	top: 50px;
    }
    .db-name4{
    	width: 250px!important;
    	height: 100px!important;
    	bottom: 0px!important;
    }
    .db-name2,.db-name4{
      width: 400px;
      height:160px;
      font-size: 36px;
      font-weight: 700;
      color: rgba(248,253,83);
      text-align: center;
      position: absolute;
      top: 140px;
      left: 35px;
      margin-top: 15px;
      .team_name{
        display: block;
        margin-left: -50px;
        margin-top: 10px;
				color: #fda800!important;
      }
      span{
        display:block;
        margin-left: -30px;
      }
    }
    .num1,.num11,.num2,.num22,.num3,.num33,.num4,.num44,.num5,.num55,.num6,.num66{
      font-size: 80px;
      position: absolute;
      color: rgba(248,253,83);
      font-weight: 700;
      width: 100px;
      height: 80px;
      text-align: center;
			.dotnum{
			  font-weight: 700;
			  color: #DFE709;
			  font-size: 44px;
			  position: absolute;
			  top: 0px;
			  left: 70px;
			}
    }
    .num1{
      top: 60px;
      left: 510px;
    }
    .num11{
      top: 60px;
      left:320px;
    }
    .num2{
      top: 150px;
      left: 510px;
    }
    .num22{
      top: 150px;
      left: 320px;
    }
    .num3{
      top: 60px;
      left: 675px;
    }
    .num33{
      top: 60px;
      left: 475px;
    }
    .num4{
      top: 150px;
      left: 675px;
    }
    .num44{
      top: 150px;
      left: 475px;
    }
    .num5{
      top: 60px;
      left: 825px;
    }
    .num55{
      top: 60px;
      left: 625px;
    }
    .num6{
      top: 150px;
      left: 825px;
    }
    .num66{
      top: 150px;
      left: 625px;
    }
    .arrow1,.arrow2,.arrow3,.arrow4,.arrow5,.arrow6,.arrow11,.arrow22{
      position: absolute;
      width: 40px;
      height: 50px;
    }
    // 普通单打上
    .arrow1{
      top:70px;
      left: 45px;
    }
    // 普通单打下
    .arrow2{
      top: 180px;
      left: 25px;
    }
    .arrow11{
    	top:70px;
    	left: 80px;
    }
    .arrow22{
    	top: 180px;
    	left: 50px;
    }
    // 双打
    .arrow3{
      top: 50px;
      left: 95px;
    }
    .arrow4{
      top: 90px;
      left: 80px;
    }
    .arrow5{
      top: 150px;
      left: 60px;
    }
    .arrow6{
      top: 205px;
      left: 40px;
    }
    // ========================
    .clear{
      clear: both;
    }
    .score1{
      float: left;
      margin-top: 60px;
      height: 180px;
    }
    .score2{
      float: left;
      margin-top: 60px;
      height: 180px;
    }
  }
  .thirth{
    width: 1100px;
    position: relative;
    .team_time{
      font-size: 36px;
      font-weight: 700;
      position: absolute;
      top: 20px;
      left: 350px;
      color: #1C809F;
      img{
        margin-right: 10px;
      }
      span,img{
        vertical-align: middle;
      }
    }
    .time{
      font-size: 36px;
      font-weight: 700;
      position: absolute;
      top: 20px;
      left: 510px;
      color: #1C809F;
      img{
        margin-right: 10px;
      }
      span,img{
        vertical-align: middle;
      }
    }
    // 名字面板
    .nameborad{
      width: 450px;
      height: 300px;
      float: left;
    }
		// 团体双打的名字面板
    .nameborad1{
      width: 650px;
      height: 402px;
    	margin-top: -52px;
      float: left;
    }
    // 绿色面板
    .markborad{
      margin-top: 60px;
      height: 180px;
      float: left;
    }
    .name_one,.name_three{
      width: 400px;
        height: 160px;
        font-size: 45px;
        font-weight: 700;
        color:rgba(248,253,83);
        text-align: center;
        position: absolute;
        top: 0;
        margin-top: -15px;
        left: 80px;
      	.team_name{
      		display: block;
      		margin-left: 50px;
      		margin-bottom: 20px;
					color: #fda800!important;
      	}
      }
     .name_three{
         width: 250px;
         left: 50px;
     		top: 77px;
     		font-size: 50px;
       }
     .name_four{
       top: 160px!important;
       width:250px!important;
       left: 30px!important;
     	text-align: center!important;
     	font-size: 50px!important;
     }
    .name_two,.name_four{
     width: 400px;
     height: 160px;
     font-size: 45px;
     font-weight: 700;
     padding-top: 15px;
     padding-bottom: 50px;
     box-sizing: border-box;
     color:rgba(248,253,83);
     text-align: center;
     position: absolute;
     bottom: 30px;
     left: 30px;
     .team_name{
     	display: block;
     	margin-left: -80px;
     	margin-top: 18px;
			color: #fda800!important;
     }
    }
    .db-name1,.db-name3{
      width: 400px;
      height: 160px;
      font-size: 36px;
      font-weight: 700;
      color:rgba(248,253,83);
      text-align: center;
      position: absolute;
      top: 0;
      margin-top: -15px;
      left: 70px;
      .team_name{
        display: block;
    		margin-left: 50px;
    		margin-bottom: 20px;
				color: #fda800!important;
      }
      span{
        display:block;
        margin-left: -30px;
      }
    }
    .db-name3{
    	width: 250px;
    	height: 100px;
    	top: 50px;
    }
    .db-name4{
    	width: 250px!important;
    	height: 100px!important;
    	bottom: 0px!important;
    }
    .db-name2,.db-name4{
      width: 400px;
      height:160px;
      font-size: 36px;
      font-weight: 700;
      color:rgba(248,253,83);
      text-align: center;
      position: absolute;
      top: 140px;
      left: 35px;
      margin-top: 15px;
      .team_name{
        display: block;
        margin-left: -50px;
        margin-top: 10px;
				color: #fda800!important;
      }
      span{
        display:block;
        margin-left: -30px;
      }
    }
    .num1,.num11,.num2,.num22,.num3,.num33,.num4,.num44,.num5,.num55,.num6,.num66,.num7,.num77,.num8,.num88{
      font-size: 80px;
      position: absolute;
      color: rgba(248,253,83);
      font-weight: 700;
      width: 100px;
      height: 80px;
      text-align: center;
			.dotnum{
			  font-weight: 700;
			  color: #DFE709;
			  font-size: 44px;
			  position: absolute;
			  top: 0px;
			  left: 70px;
			}
    }
    .num1{
      top: 60px;
      left: 510px;
    }
    .num11{
      top: 60px;
      left:320px;
    }
    .num2{
      top: 150px;
      left: 510px;
    }
    .num22{
      top: 150px;
      left: 320px;
    }
    .num3{
      top: 60px;
      left: 675px;
    }
    .num33{
      top: 60px;
      left: 475px;
    }
    .num4{
      top: 150px;
      left: 675px;
    }
    .num44{
      top: 150px;
      left: 475px;
    }
    .num5{
      top: 60px;
      left: 825px;
    }
    .num55{
      top: 60px;
      left: 625px;
    }
    .num6{
      top: 150px;
      left: 825px;
    }
    .num66{
      top: 150px;
      left: 625px;
    }
    .num7{
      top: 60px;
      left: 975px;
    }
    .num77{
      top: 60px;
      left: 775px;
    }
    .num8{
      top: 150px;
      left: 975px;
    }
    .num88{
      top: 150px;
      left: 775px;
    }
    .arrow1,.arrow2,.arrow3,.arrow4,.arrow5,.arrow6,.arrow11,.arrow22{
      position: absolute;
      width: 40px;
      height: 50px;
    }
    // 普通单打上
    .arrow1{
      top:70px;
      left: 45px;
    }
    // 普通单打下
    .arrow2{
      top: 180px;
      left: 25px;
    }
    .arrow11{
    	top:70px;
    	left: 80px;
    }
    .arrow22{
    	top: 180px;
    	left: 50px;
    }
    // 双打
    .arrow3{
      top: 50px;
      left: 95px;
    }
    .arrow4{
      top: 90px;
      left: 80px;
    }
    .arrow5{
      top: 150px;
      left: 60px;
    }
    .arrow6{
      top: 205px;
      left: 40px;
    }
    // ========================
    .clear{
      clear: both;
    }
    .score1{
      float: left;
      margin-top: 60px;
      height: 180px;
    }
    .score2{
      float: left;
      margin-top: 60px;
      height: 180px;
    }
	}
  }
}
</style>
